<script setup>
// 只保留必要的全局状态管理和 provide
import { useAuth } from './composables/useAuth'
import { provide, watch } from 'vue'
import { useRouter } from 'vue-router' // 导入 useRouter

const { isAuthenticated, authToken, user, login, logout, handleUnauthorized } = useAuth();
const router = useRouter();

// 提供全局状态
provide('isAuthenticated', isAuthenticated);
provide('authToken', authToken);
provide('user', user);

// 监听认证状态变化，用于在 token 失效等情况下强制跳转
// 注意：路由守卫处理了大部分情况，这里是补充
watch(isAuthenticated, (newValue, oldValue) => {
  if (oldValue === true && newValue === false) {
    // 如果是从登录状态变为未登录状态，且当前不在登录或首页
    const currentRoute = router.currentRoute.value;
    if (currentRoute.name !== 'Login' && currentRoute.name !== 'Landing') {
      console.log('App.vue watch: Authentication lost, redirecting to login.');
      router.push({ name: 'Login', query: { redirect: currentRoute.fullPath } });
    }
  } else if (oldValue === false && newValue === true) {
     // 如果是从未登录变为登录状态，且当前在登录或注册页
     const currentRoute = router.currentRoute.value;
     if (currentRoute.name === 'Login' || currentRoute.name === 'Register') {
        const redirectPath = currentRoute.query.redirect || '/chat';
        console.log('App.vue watch: Authenticated on auth page, redirecting to', redirectPath);
        router.push(redirectPath);
     }
  }
});

// App.vue 不再需要 onMounted 来决定显示哪个页面，由路由处理
// App.vue 不再需要处理来自 LandingPage 的事件

</script>

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>

<style>
/* 可以添加全局过渡效果 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

/* 确保 html, body, #app 样式正确，允许页面滚动 */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  /* height: 100%; */ /* 移除或注释掉 */
  overflow-x: hidden; /* 防止水平滚动 */
}

#app {
  width: 100%;
  min-height: 100vh; /* 保证 #app 至少占满视口高度 */
  display: flex; /* 确保 router-view 能正常工作 */
  flex-direction: column;
}
</style>